<script lang="ts" setup name="HeaderCard">
import { ArrowLeft } from "@element-plus/icons-vue";
interface Props {
  title: string;
  isShowButton?: boolean;
}
interface Emits {
  (name: "back"): void;
  (name: "confirm"): void;
}
const props = withDefaults(defineProps<Props>(), {
  isShowButton: true
});
const emits = defineEmits<Emits>();
</script>

<template>
  <div class="headerCard-box">
    <el-page-header @back="emits('back')" :icon="ArrowLeft">
      <template #content>
        <div class="flex items-center">
          <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">{{ props.title }}</span>
        </div>
      </template>
      <template #extra>
        <div v-if="props.isShowButton" class="flex items-center">
          <el-button type="primary" class="ml-2" @click="emits('confirm')">保存</el-button>
        </div>
      </template>
    </el-page-header>
  </div>
  <hr color="#e4e7ed" />
</template>

<style lang="scss" scoped>
.headerCard-box {
  box-sizing: border-box;
  align-items: center;
  height: 70px;
  padding: 20px;
}
</style>
